<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 490px;
            height: 36px;
            border: 3px solid rgb(58,128,194);
            margin: 100px auto;
        }
        .box input{
            color: #999;
            width: 430px;
            height:36px;
            line-height: 36px;
            border: 0;
            outline: none;
        }
        .box button{
            width: 50px;
            height: 100%;
            border: 1px solid rgb(0,140,225);
            background-color: rgb(0,140,225) ;
            color: white;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" value="手机">
        <button>搜索</button>
    </div>
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        input.onfocus = function () {
            // this.placeholder = '';
            if (this.value === '手机'){
                this.value = '';
            }
            //获得焦点需要把文本框里面的文字颜色变黑
            this.style.color = 'black'

        }
        input.onblur = function () {
            if (this.value === ''){
                this.value = '手机';
            }
            //失去焦点需要把文本框里面的文字颜色变浅
            this.style.color = '#999'
        }
    </script>
</body>
</html>